<template>
    <div class="contain">
        <div class="card">
            <el-form v-if="data.user.role==='EMP'" :model="data.form" label-width="120px">
                <el-form-item label="头像">
                    <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8080/files/upload"
                        list-type="picture"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="data.user.avatar" :src="'http://localhost:8080/files/download/' + data.user.avatar" class="avatar"/>
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>
                </el-form-item>

                <el-form-item label="用户名">
                <el-input v-model="data.user.username" />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="data.user.password"/>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="data.user.name" />
                </el-form-item>

                <el-form-item label="性别">
                    <el-radio-group v-model="data.user.sex">
                       <el-radio value="男" label="男"></el-radio> 
                       <el-radio value="女" label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="工号">
                    <el-input v-model="data.user.no" />
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="data.user.description" />
                </el-form-item>
            </el-form>

            <el-form v-else :model="data.form" label-width="120px">
                <el-form-item label="头像">
                    <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8080/files/upload"
                        list-type="picture"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="data.user.avatar" :src="'http://localhost:8080/files/download/' + data.user.avatar" class="avatar"/>
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>
                </el-form-item>

                <el-form-item label="用户名">
                <el-input v-model="data.user.username" />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="data.user.password"/>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="data.user.name" />
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="data.dialogVisible = true">更新个人信息</el-button>
        </div>

        <!-- 弹窗 -->
        <el-dialog
            v-model="data.dialogVisible"
            title="提示"
            width="30%">
            <span>确认更新？</span>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="data.dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="updateConfirm">确认</el-button>
            </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import request from '@/utils/request';
import { ElMessage } from 'element-plus';
import { reactive,ref,onMounted } from 'vue';
import { Plus } from '@element-plus/icons-vue'


const data = reactive({
    user:{},
    dialogVisible:false
})

//获得个人信息
const getMessage = () =>{
    const id = JSON.parse(localStorage.getItem('user')).id
    if(JSON.parse(localStorage.getItem('user')).role=='EMP'){
         request.get(`/employee/getOne/${id}`).then(res =>{
            data.user = res.data
        })   
    }else{
        request.get(`/admin/getOne/${id}`).then(res =>{
            data.user = res.data
        }) 
    }

}

// 图片上传相关逻辑
const handleAvatarSuccess = (file) => {
    // imageUrl.value = URL.createObjectURL(file.raw);
    console.log(file,"file1");
    // 提取文件名
    const url = file.data;
    const fileName = url.split('/').pop();
    data.user.avatar = fileName;
    
};
const beforeAvatarUpload = (file) => {
    console.log(file,"file2");
    const isImage = file.type.startsWith('image/');
    if (!isImage) {
        ElMessage.error('只能上传图片文件！');
    }
    return isImage;
};

//确认更新个人信息
const updateConfirm = () =>{
    console.log(data.user,"data.user");
    if(data.user.role=="EMP"){
        request.put("/employee/update",data.user).then(res =>{
            if(res.code == '200'){
                ElMessage.success("更改成功")
                getMessage()
                data.dialogVisible = false
                //更新缓存信息
                localStorage.setItem('user',JSON.stringify(data.user))
            }else{
                ElMessage.error(res.msg)
            }
        })
    }else{     
        request.put("/admin/update",data.user).then(res =>{
            if(res.code == '200'){
                ElMessage.success("更改成功")
                getMessage()
                data.dialogVisible = false
                //更新缓存信息
                localStorage.setItem('user',JSON.stringify(data.user))
            }else{
                ElMessage.error(res.msg)
            }
        })
    }

}

onMounted(() =>{
    getMessage()    
})
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.avatar{
    width: 100%;
    height: 100%;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>